<template>
    <div>
        <el-button size="mini" @click="openBatchEditModal">批量编辑</el-button>

        <el-dialog title="批量编辑" :visible.sync="batchEditModalVisible" width="60%">
            <el-form>
                <el-form-item label="上传 CSV 文件">
                    <el-upload class="upload-demo" :before-upload="beforeUploadCsv" :limit="1" :accept="'text/csv'"
                        :file-list="fileList">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">
                            请上传 CSV 文件，大小在 50M 以内
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>

            <el-table v-if="showTable" :data="csvTableData" border style="width: 100%; margin-top: 20px">
                <!-- 这里可以优化的啊 -->
                <el-table-column prop="id" label="id" align="center"></el-table-column>
                <el-table-column prop="剧名" label="剧名" align="center"></el-table-column>
                <el-table-column prop="简介" label="简介" align="center"></el-table-column>
                <el-table-column prop="版权方" label="版权方" align="center"></el-table-column>
                <el-table-column prop="题材类型" label="题材类型" align="center"></el-table-column>
            </el-table>

            <div slot="footer" class="dialog-footer">
                <el-button @click="batchEditModalVisible = false">取消</el-button>
                <el-button type="primary" @click="confirm" v-if="showTable">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            batchEditModalVisible: false,
            fileList: [],
            csvTableData: [],
            showTable: false
        };
    },
    methods: {
        openBatchEditModal() {
            this.batchEditModalVisible = true;
        },
        beforeUploadCsv(file) {
            // 检查文件大小是否超过限制
            const isLt50M = file.size / 1024 / 1024 < 50;
            if (!isLt50M) {
                this.$message.error("文件大小不能超过 50MB!");
                return false; // 阻止上传
            }

            const reader = new FileReader();
            reader.onload = (e) => {
                const csv = e.target.result;
                console.log("csv", csv);
                this.csvTableData = this.parseCsv(csv);
                this.showTable = true;
            };
            reader.readAsText(file);
            return false; // 阻止上传
        },
        parseCsv(csv) {
            // 解析 CSV 字符串并返回数组形式的数据
            // 这里假设 CSV 的格式是简单的逗号分隔值，每行数据一行
            const lines = csv.split("\n");
            const headers = lines[0].split(",");
            const data = [];
            for (let i = 1; i < lines.length; i++) {
                const values = lines[i].split(",");
                const rowData = {};
                for (let j = 0; j < headers.length; j++) {
                    rowData[headers[j]] = values[j];
                }
                data.push(rowData);
            }
            console.log("data", data);
            return data;
        },
        confirm() {
            // 在这里处理确定按钮的逻辑
            console.log("确定按钮点击了");
            // 你可以在这里处理表格数据并将其提交给服务器
            // 提交后，你可能需要关闭对话框
            // this.batchEditModalVisible = false;
        },
    }
};
</script>
  
<style scoped>
/* Add your custom styles here */
</style>
  